// 全局变量
var scrollTop = 0,
    all_mobile = 1024,
    clientWidth = document.documentElement.clientWidth,
    clientHeight = document.documentElement.clientHeight,
    body = document.querySelector('body'),
    header = document.querySelector('header'),
    common_banner = document.querySelector('.common_banner'),
    direction = 'down',
    parallax = document.querySelector('.parallax'),
    interleaveOffset = 0.5;

// 滚动条初始化
var Scrollbar = window.Scrollbar;
Scrollbar.initAll({damping: 0.07,renderByPixels: false});
var scrollbar = Scrollbar.get(document.querySelector('[data-scrollbar]'))
scrollbar.addListener((status) => {
    window.pageYOffset = scrollbar.scrollTop;
    getScrollTop(window.pageYOffset)
});

// 全局初始化
function pageInit() {
    setTimeout(function () {
        AOS.init({scroll: 0, mobile: all_mobile, once: true});
        !document.documentElement.querySelector('#index') ? $('.each_animate').addClass('on') : ''
        common_banner ? common_banner.classList.add('on') : ''
    }, 50)

    link_scroll()
}

// getScrollTop(0)

// 滚动处理
function getScrollTop(scrollTop) {
    AOS.init({scroll: 0, mobile: all_mobile, once: true});
    header ? scrollTop > 100 ? header.classList.add('header_on') : header.classList.remove('header_on') : ''
    parallax ? getTransform(parallax,scrollTop * 0.9) : ''

    if (document.documentElement.querySelector('#technology')) {

        var content_s = $('.sec3').position().top;
        var items = $('.sec3 .fix .wrap .flex .content .item')
        var h = clientHeight*(items.length-1)
        var all = h / (items.length + 1);
        $('.sec3').css('height',h + 'px')
        var cur_index = Math.floor((scrollTop - ($('.sec3').position().top - 100)) / all)
        cur_index < 0 ? cur_index = 0 : cur_index
        cur_index > items.length - 1 ? cur_index = items.length - 1 : cur_index
        $('.index4 .wrap .img img').removeClass('on').eq(cur_index).addClass('on')

        $(items).click(function () {
            var index = $(this).index()
            scrollbar.scrollTo(content_s + index * all)
        })
        if (scrollTop >= content_s && scrollTop <= (content_s+h-clientHeight)) {
            $('.sec3 .fix').css('transform', 'translateY('+ (scrollTop - content_s) + 'px)');

        }

        for (var i = 0; i < items.length; i++) {
            var item = items.eq(i);
            var index = i + 1;
            var start = content_s + i * all;
            var end = content_s + (i + 1) * all;
            var _1, _2;

            var num1 = 82
            var num2 = 395

            _1 = num2 + (scrollTop - start) / all * -(num2 - num1);
            _2 = num1 + (scrollTop - start) / all * (num2 - num1);

            // let clip = (scrollTop - start) / clientHeight * 100

            if (scrollTop >= start && scrollTop <= end) {
                item.css('height', _1 + 'px');
                if (index < items.length) {
                    items.eq(index).css('height', _2 + 'px');
                    // $('.sec3 .fix .wrap .flex .img img:nth-child('+ index +')').css({
                    //     'clip-path': 'inset(0 0 '+ clip +'% 0)'
                    // })
                }
            } else {
                if (index < items.length) {
                    items.eq(index).css('height', '82px');
                    // $('.sec3 .fix .wrap .flex .img img').eq(index).css({
                    //     'clip-path': 'inset(0 0 0 0)'
                    // })
                }
            }
            if (scrollTop >= end) {
                items.eq(0).css('height', '82px');
            }
            if (scrollTop >= content_s + (items.length - 1) * all) {
                items.eq(items.length - 1).css('height', '395px');
            }
            var ele = $('.sec3 .fix .wrap .flex .img img')
            var clip = (scrollTop-(content_s + (i * all))) / all * 100
            if (scrollTop >= content_s && scrollTop <= (content_s+h-clientHeight)) {
                if (scrollTop >= content_s + (i * all)) {
                    if (i !== ele.length-1) {
                        $('.sec3 .fix .wrap .flex .img img:nth-child('+ (i+1) +')').css({
                            'clip-path': 'inset(0 0 '+ clip +'% 0)'
                        })
                    }
                }else {
                    $('.sec3 .fix .wrap .flex .img img:nth-child('+ (i+1) +')').css({
                        'clip-path': 'inset(0 0 0 0)'
                    })
                }

                if (scrollTop >= content_s + (i * all) + all) {
                    $('.sec3 .fix .wrap .flex .img img:nth-child('+ (i+1) +')').css({
                        'clip-path': 'inset(0 0 100% 0)'
                    })
                }
            }

        }
    }
    if (document.documentElement.querySelector('#machining')) {
        $('.section').each(function (i,e) {
            let s = []
            let l = $(e).find('.item').length
            $(e).find('.item').each(function (i2, e2) {
                $(e2).css('z-index', i2)
            })
            let h = clientHeight * l
            $(e).css('height', h + 'px')
            let zg8_start = $(e).position().top
            let zg8_end = $(e).height() - clientHeight

            if (scrollTop >= zg8_start && scrollTop <= $(e).next().position().top - clientHeight) {

                $(e).find('.fix').css('transform', 'translateY(' + (scrollTop - zg8_start) + 'px)')
            } else if (scrollTop <= zg8_start) {
                $(e).find('.fix').css('transform', 'translateY(0px)')
            }

            if (scrollTop >= $(e).next().position().top - clientHeight) {
                $(e).find('.fix').css('transform', 'translateY(' + zg8_end + 'px)')
            }

            $(e).find('.fix .wrap .wrap_box .item:nth-child(n+2)').each(function (i1, e1) {
                let img_start = (i1 * clientHeight) + zg8_start
                let y = 100 + (scrollTop - img_start) / clientHeight * -100
                if (scrollTop >= img_start && scrollTop <= img_start + clientHeight) {
                    $(e1).css({
                        'transform': 'translateY(' + y + 'vh)',
                    })

                } else if (scrollTop <= img_start) {
                    $(e1).css({
                        'transform': 'translateY(100vh)',
                    })
                }
                s[i1] = 1 - ((l - 1) - i) * 0.025
                if (scrollTop >= img_start + clientHeight) {
                    $(e1).addClass('nb')
                    $(e1).css({
                        'transform': 'translateY(0px)',
                    })
                } else {
                    $(e1).removeClass('nb')
                }
            })
        })
    }
    if (document.documentElement.querySelector('#about')) {
        let h_top = $('.sec1 .wrap .zi').position().top
        if (scrollTop >= h_top) {
            $('.sec1 .wrap .zi').css('transform', 'translateX(' + ((scrollTop - h_top)*-0.3) + 'px)')
        }
        let h4 = $('.sec3').position().top
        if (scrollTop >= h4) {
            $('.sec4 .bg img').css('transform', 'translateY(' + ((scrollTop - h4)*-0.3) + 'px)')
        }
    }
    if (scrollTop>0) {
        $('.index_banner .img').css('transform', 'translateY('+ scrollTop*0.7 + 'px)')
    }else {
        $('.index_banner .img').css('transform', 'translateY(0px)')
    }

}


// anchor
function GetRequest() {
    var url = location.search;
    var theRequest = {};
    if (url.indexOf("?") !== -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}

function link_scroll() {
    var anchor = GetRequest().scrollTo;
    if(anchor!==''){
        var ele = document.querySelector('#'+anchor);
        if(ele){
            var offsetTop = ele.offsetTop
            if (clientWidth > all_mobile) {
                scrollbar.scrollTo(0, offsetTop, 1200);
            }else {
                $('html').animate({
                    scrollTop: offsetTop
                },1000)
            }
        }
    }
}

function getTransform(a,b,end) {
    if (end) {
        b > end ? b = end : ''
        if (b <= end) {
            a.style.transform = `matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, ${b}, 0, 1)`;
        }
    }else{
        a.style.transform = `matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, ${b}, 0, 1)`;
    }
}

function clickDown(e) {
    $(e).parent().toggleClass('on')
    $(e).parent().siblings().removeClass('on')
    $(e).siblings().stop().slideToggle(300)
    $(e).parent().siblings().find('.hide').slideUp(300)
}

function backTop() {
    window.pageYOffset !== 0 ? scrollbar.scrollTo(0, 0, 1200) : ''
}

function MouseDown() {
    // 下
}

function MouseUp() {
    // 上
}

$('.each_animate').each(function (index, ele) {
    var $span = $(ele).find('span');
    var text = $(ele).text(); // 获取<p>标签的内部HTML内容
    if ($span.length === 0) {
        // 如果没有找到<span>，直接对整个文本进行拆分
        var textArray = text.split('');
        var html = '';
        for (var i in textArray) {
            html += '<div style="display: inline-block;">' + textArray[i] + '</div>';
        }
        $(ele).html(html); // 替换原来的<p>内容
    } else {
        // 如果找到了<span>，对<span>内部的文本进行拆分
        var spanText = $span.html();
        var spanTextArray = spanText.split('');
        var spanHtml = '';
        for (var i in spanTextArray) {
            spanHtml += '<div style="display: inline-block;">' + spanTextArray[i] + '</div>';
        }
        $span.html(spanHtml); // 替换<span>内部的内容
    }

    $(ele).contents().filter(function () {
        return this.nodeType === 3; // 保留文本节点
    }).each(function () {
        var text = $(this).text();
        var textArray = text.split('');
        var html = '';
        for (var i in textArray) {
            html += '<div style="display: inline-block;">' + textArray[i] + '</div>';
        }
        $(this).replaceWith(html);
    });

    $(ele).find('div').each(function (index, ele) {
        let delay = index * 0.03 + 0.2;
        $(ele).css({
            'transition-delay': delay + 's',
            'opacity': '0',
            'transform': 'translateX(10px)',
            'min-width': '10px'
        });
    });
});

// addEventListener
$(document).on('mousewheel', function(event) {
    var delta = event.originalEvent.deltaY || -event.originalEvent.detail;
    if (delta > 0) {
        direction = 'down';
        MouseDown()
    } else {
        direction = 'up';
        MouseUp()
    }
});

$('.sec1 .wrap .content .item').click(function () {
    var img = $(this).find('.img img').attr('src')
    var text = $(this).find('.text').text()
    $('.pro_alert .content .img img').attr('src',img)
    $('.pro_alert .content .text').html(text)
    $('.pro_alert').addClass('on')
})

$('.pro_alert .content .close,.pro_alert .mask').click(function () {
    $('.pro_alert').removeClass('on')
})
$('.banner').addClass('on')
// Swiper

pageInit()

$('.goTop a').click(function () {
    scrollbar.scrollTo(0, 0, 1200);
})
$('header .menu').click(function () {
    $(this).toggleClass('click')
    $('header .nav').toggleClass('click')
})
